import React, { PureComponent } from 'react'
import '../../css/frame.scss'
import Menu from '../component/menu/menu'
import { connect } from 'react-redux'
import { changeKey } from '../action/map.action'
import Route from 'react-router-dom/Route'
import Company from '../container/company'
import Flow from '../component/order/flow'
import Order from '../container/order'
import Pay from '../container/pay'
import PayQuota from '../container/pay-quota'
import Product from '../container/product'
import Scheduling from '../container/scheduling'
import Stock from '../container/stock'
import Tallying from '../container/tallying'
import Temper from '../container/temper'
import OnceStandard from '../container/once-to-standard'
import TestStandard from '../container/test-to-standard'
import Device from '../container/device'
import Problem from '../container/problem'
import ProblemPos from '../container/problem-pos'
import FrameWork from '../container/framework'
import TechniqueIndex from '../container/technique-index'
import Technique from '../container/technique'
import Quality from '../container/quality-warn'
import Business from '../container/business'
import Solution from '../container/solution'
import Video from '../container/video'
import VideoBox from './video-box'

const Topic = ({match}) => {
    const id = match.params.menuId
    const routers = {
        company: Company,
        'company-pos': Company,
        flow: Flow,
        order: Order,
        pay: Pay,
        'pay-quota': PayQuota,
        product: Product,
        scheduling: Scheduling,
        stock: Stock,
        tallying: Tallying,
        temper: Temper,
        standard: OnceStandard,
        test: TestStandard,
        device: Device,
        problem: Problem,
        'problem-pos': ProblemPos,
        framework: FrameWork,
        'technique-index': TechniqueIndex,
        technique: Technique,
        quality: Quality,
        business: Business,
        solution: Solution,
        video: Video,
        'video-box': VideoBox,
    }

    const Component = routers[id]
    return Component ? <Component/> : null
}

class Manager extends PureComponent {
    constructor () {
        super()
    }

    handleClick = (key) => {
        const {dispatch} = this.props
        dispatch(changeKey())
    }

    render () {
        const {match} = this.props
        return (
            <div>
                <div className="frame-menu">
                    <Menu handleClick={this.handleClick} match={match}/>
                </div>
                <div className="frame-content">
                    <Route path={`${match.url}/:menuId`} component={Topic}/>
                    <Route exact path={match.url} render={() => (
                        <Pay/>
                    )}/>
                </div>
            </div>
        )
    }

}
function mapStoreToProps ({menuKey}) {
    return {menuKey}
}

export default connect(mapStoreToProps)(Manager)
